<template>
  <span>
    <template v-if="readonly">
      <a-form-item-rest>
        <a-checkbox :checked="value_display" disabled />
      </a-form-item-rest>
    </template>

    <template v-else>
      <a-checkbox v-model:checked="value2" @change="onCheckChange" />
    </template>
  </span>
</template>

<script setup>
import { useWidget } from './userWidget'

const props = defineProps(['modelValue', 'node', 'formInfo'])
const emit = defineEmits(['update:modelValue', 'change'])

const useData = useWidget(props, { emit })

const { readonly, value_display } = useData
const { value2, onChange } = useData

function onCheckChange(e) {
  const value = e.target.checked
  onChange(value)
}
</script>

<style type="text/css"></style>
